<template>
	<view class="container">
		<view class="header">
			<text class="title">浏览历史</text>
		</view>
		
		<!-- 选项卡 -->
		<view class="tab-container">
			<view 
				class="tab-item" 
				v-for="(tab, index) in tabs" 
				:key="index"
				:class="{'active': currentTab === index}"
				@tap="switchTab(index)"
			>
				<text>{{tab.name}}</text>
			</view>
		</view>
		
		<!-- 内容区域 -->
		<swiper class="content-swiper" :current="currentTab" @change="handleSwiperChange">
			<!-- 景点浏览历史 -->
			<swiper-item>
				<scroll-view scroll-y class="scroll-container">
					<view class="empty-view" v-if="attractions.length === 0">
						<image class="empty-icon" src="/static/logo.png" mode="aspectFit"></image>
						<text class="empty-text">暂无浏览记录</text>
					</view>
					<view class="item-list" v-else>
						<view 
							class="history-item" 
							v-for="(item, index) in attractions" 
							:key="index"
							@tap="navigateToDetail('attractions', item.id)"
						>
							<image class="item-image" :src="item.imageUrl" mode="aspectFill"></image>
							<view class="item-info">
								<text class="item-name">{{item.name}}</text>
								<text class="item-desc">{{item.description}}</text>
								<text class="view-time">{{item.viewTime || '今天'}}</text>
							</view>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
			
			<!-- 美食浏览历史 -->
			<swiper-item>
				<scroll-view scroll-y class="scroll-container">
					<view class="empty-view" v-if="foods.length === 0">
						<image class="empty-icon" src="/static/logo.png" mode="aspectFit"></image>
						<text class="empty-text">暂无浏览记录</text>
					</view>
					<view class="item-list" v-else>
						<view 
							class="history-item" 
							v-for="(item, index) in foods" 
							:key="index"
							@tap="navigateToDetail('foods', item.id)"
						>
							<image class="item-image" :src="item.imageUrl" mode="aspectFill"></image>
							<view class="item-info">
								<text class="item-name">{{item.name}}</text>
								<text class="item-desc">{{item.description}}</text>
								<text class="view-time">{{item.viewTime || '今天'}}</text>
							</view>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
			
			<!-- 攻略浏览历史 -->
			<swiper-item>
				<scroll-view scroll-y class="scroll-container">
					<view class="empty-view" v-if="guides.length === 0">
						<image class="empty-icon" src="/static/logo.png" mode="aspectFit"></image>
						<text class="empty-text">暂无浏览记录</text>
					</view>
					<view class="item-list" v-else>
						<view 
							class="history-item" 
							v-for="(item, index) in guides" 
							:key="index"
							@tap="navigateToDetail('guide', item.id)"
						>
							<image class="item-image" :src="item.coverImage || item.cover" mode="aspectFill"></image>
							<view class="item-info">
								<text class="item-name">{{item.title}}</text>
								<view class="author-row">
									<image class="author-avatar" :src="item.authorAvatar" mode="aspectFill"></image>
									<text class="author-name">{{item.authorName}}</text>
								</view>
								<text class="view-time">{{item.viewTime || '今天'}}</text>
							</view>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
			
			<!-- 酒店浏览历史 -->
			<swiper-item>
				<scroll-view scroll-y class="scroll-container">
					<view class="empty-view" v-if="hotels.length === 0">
						<image class="empty-icon" src="/static/logo.png" mode="aspectFit"></image>
						<text class="empty-text">暂无浏览记录</text>
					</view>
					<view class="item-list" v-else>
						<view 
							class="history-item" 
							v-for="(item, index) in hotels" 
							:key="index"
							@tap="navigateToDetail('hotels', item.id)"
						>
							<image class="item-image" :src="item.imageUrl" mode="aspectFill"></image>
							<view class="item-info">
								<text class="item-name">{{item.name}}</text>
								<text class="item-desc">{{item.description}}</text>
								<text class="view-time">{{item.viewTime || '今天'}}</text>
							</view>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentTab: 0,
				tabs: [
					{ name: '景点', type: 'attractions' },
					{ name: '美食', type: 'foods' },
					{ name: '攻略', type: 'guides' },
					{ name: '酒店', type: 'hotels' }
				],
				attractions: [
					{
						id: 1,
						name: '顺德博物馆',
						imageUrl: '/static/图片.jpg',
						description: '顺德 推荐',
						viewTime: '昨天 15:30'
					},
					{
						id: 2,
						name: '佛山祖庙',
						imageUrl: '/static/图片.jpg',
						description: '禅城 五星级',
						viewTime: '2天前'
					},
					{
						id: 3,
						name: '南风古灶',
						imageUrl: '/static/图片.jpg',
						description: '石湾 必打卡',
						viewTime: '3天前'
					}
				],
				foods: [
					{
						id: 1,
						name: '沙扒湾海鲜大排档',
						imageUrl: '/static/图片.jpg',
						description: '海鲜 当地特色',
						viewTime: '昨天 18:20'
					},
					{
						id: 2,
						name: '阿强烧烤',
						imageUrl: '/static/图片.jpg',
						description: '烧烤 人气爆棚',
						viewTime: '上周'
					}
				],
				guides: [
					{
						id: 1,
						title: '🔥玩沙扒湾(三天行)——很全攻略',
						cover: '/static/图片.jpg',
						coverImage: '/static/图片.jpg',
						authorName: 'sanseafish晓',
						authorAvatar: '/static/logo.png',
						viewTime: '3天前'
					},
					{
						id: 2,
						title: '值得收藏！沙扒湾最好吃美食TOP5——这是完美攻略',
						cover: '/static/图片.jpg',
						coverImage: '/static/图片.jpg',
						authorName: 'sanseafish晓',
						authorAvatar: '/static/logo.png',
						viewTime: '上周'
					}
				],
				hotels: [
					{
						id: 1,
						name: '沙扒湾海景酒店',
						imageUrl: '/static/图片.jpg',
						description: '海景房 含早餐',
						viewTime: '昨天 10:15'
					},
					{
						id: 2,
						name: '悦榕庄度假酒店',
						imageUrl: '/static/图片.jpg',
						description: '五星级 泳池',
						viewTime: '上周'
					}
				]
			}
		},
		onLoad() {
			// 加载浏览历史数据
			this.loadHistoryData();
		},
		methods: {
			// 切换选项卡
			switchTab(index) {
				this.currentTab = index;
			},
			
			// 滑动切换
			handleSwiperChange(e) {
				this.currentTab = e.detail.current;
			},
			
			// 加载历史数据
			loadHistoryData() {
				// 实际应用中，应该从本地存储或服务器获取历史记录
				// 这里使用示例数据
				
				// 获取token
				const token = uni.getStorageSync('token');
				if (!token) {
					return;
				}
				
				// 示例：从本地存储获取历史记录
				try {
					const attractionsHistory = uni.getStorageSync('attractionsHistory');
					if (attractionsHistory) {
						// this.attractions = JSON.parse(attractionsHistory);
					}
					
					const foodsHistory = uni.getStorageSync('foodsHistory');
					if (foodsHistory) {
						// this.foods = JSON.parse(foodsHistory);
					}
					
					const guidesHistory = uni.getStorageSync('guidesHistory');
					if (guidesHistory) {
						// this.guides = JSON.parse(guidesHistory);
					}
					
					const hotelsHistory = uni.getStorageSync('hotelsHistory');
					if (hotelsHistory) {
						// this.hotels = JSON.parse(hotelsHistory);
					}
				} catch (e) {
					console.error('获取历史记录失败:', e);
				}
			},
			
			// 跳转到详情页
			navigateToDetail(type, id) {
				uni.navigateTo({
					url: `/pages/${type}/detail?id=${id}`
				});
			},
			
			// 清除历史记录
			clearHistory() {
				uni.showModal({
					title: '提示',
					content: '确定要清空浏览历史吗？',
					success: (res) => {
						if (res.confirm) {
							const type = this.tabs[this.currentTab].type;
							
							// 清空当前选项卡的历史记录
							switch(type) {
								case 'attractions':
									this.attractions = [];
									uni.removeStorageSync('attractionsHistory');
									break;
								case 'foods':
									this.foods = [];
									uni.removeStorageSync('foodsHistory');
									break;
								case 'guides':
									this.guides = [];
									uni.removeStorageSync('guidesHistory');
									break;
								case 'hotels':
									this.hotels = [];
									uni.removeStorageSync('hotelsHistory');
									break;
							}
							
							uni.showToast({
								title: '清除成功',
								icon: 'success'
							});
						}
					}
				});
			}
		}
	}
</script>

<style>
	.container {
		min-height: 100vh;
		background-color: #f5f5f5;
	}
	
	.header {
		background-color: #ffffff;
		padding: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1rpx solid #eeeeee;
	}
	
	.title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
	}
	
	.tab-container {
		display: flex;
		background-color: #ffffff;
		padding: 20rpx 30rpx;
		border-bottom: 1rpx solid #eeeeee;
	}
	
	.tab-item {
		flex: 1;
		text-align: center;
		font-size: 28rpx;
		color: #666;
		padding: 10rpx 0;
		position: relative;
	}
	
	.tab-item.active {
		color: #1296db;
		font-weight: bold;
	}
	
	.tab-item.active::after {
		content: '';
		position: absolute;
		bottom: -10rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 40rpx;
		height: 4rpx;
		background-color: #1296db;
	}
	
	.content-swiper {
		height: calc(100vh - 170rpx);
	}
	
	.scroll-container {
		height: 100%;
	}
	
	.empty-view {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 100rpx 0;
	}
	
	.empty-icon {
		width: 160rpx;
		height: 160rpx;
		margin-bottom: 20rpx;
		opacity: 0.5;
	}
	
	.empty-text {
		font-size: 28rpx;
		color: #999;
	}
	
	.item-list {
		padding: 20rpx;
	}
	
	.history-item {
		display: flex;
		background-color: #ffffff;
		border-radius: 12rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
	}
	
	.item-image {
		width: 160rpx;
		height: 120rpx;
		border-radius: 8rpx;
		margin-right: 20rpx;
	}
	
	.item-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	
	.item-name {
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 10rpx;
	}
	
	.item-desc {
		font-size: 24rpx;
		color: #666;
	}
	
	.author-row {
		display: flex;
		align-items: center;
		margin-bottom: 10rpx;
	}
	
	.author-avatar {
		width: 36rpx;
		height: 36rpx;
		border-radius: 50%;
		margin-right: 10rpx;
	}
	
	.author-name {
		font-size: 24rpx;
		color: #666;
	}
	
	.view-time {
		font-size: 22rpx;
		color: #999;
		align-self: flex-end;
	}
</style> 